<template>
    <view class="container">

        <cunstom_navigation_bar :tapEvent="goback" :title="`发布`" :propStyles="propStyles">
        </cunstom_navigation_bar>
        <view class="contentBox">
            <view class="topLine">
                <view class="personalInfo">
                    <image class="headPortrait" mode="widthFix"
                        src="https://visionmpapi.jiuerjindi.com/upload/mp/myInfo/headportrait.png">
                    </image>
                    <view class="right">
                        <view class="name">英明的通天教主</view>
                        <view class="status">刚刚来过</view>
                    </view>
                </view>
                <view class="introduction">
                    <image src="https://visionmpapi.jiuerjindi.com/upload/mp/cookPersonal/introduction.png"></image>
                    <view>简介：作者有点忙，还没介绍自己~</view>
                </view>
                <view class="cookHome">

                    <view class="contentList">
                        <view v-for="(item,index) in cookInfoData" class="dataBox">
                            <view class="personInfo">
                                <view class="left">
                                    <image class="headPicture"
                                        src="https://visionmpapi.jiuerjindi.com/upload/mp/index/headPicture.png">
                                    </image>
                                </view>
                                <view class="right">
                                    <view class="line1">
                                        <view class="nickName">{{item.nickName}}</view>
                                        <view>
                                            <image v-if="item.gender==0" class="genderImg" mode="widthFix"
                                                src="https://visionmpapi.jiuerjindi.com/upload/mp/index/gender0.png">
                                            </image>
                                            <image v-else class="genderImg" mode="widthFix"
                                                src="https://visionmpapi.jiuerjindi.com/upload/mp/index/gender1.png">
                                            </image>
                                        </view>
                                    </view>
                                    <view class="line2">
                                        {{item.age}}·{{item.addr}}
                                    </view>
                                </view>
                            </view>
                            <view class="text">
                                {{item.text}}
                            </view>
                            <view class="tag">
                                #{{item.tag}}
                            </view>
                            <view class="media">
                                <image class="uploadImg" v-if="item.type=='image'"
                                    src="https://visionmpapi.jiuerjindi.com/upload/mp/index/uploadImg.png"
                                    mode="widthFix">
                                </image>
                                <video id="myVideo" v-if="item.type=='video'"
                                    src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4"
                                    class="swiperImg" object-fit="fill" ref="video" :show-center-play-btn="hidePlayBtn"
                                    @play="videoIsPlay = true" @pause="videoIsPlay = false" muted
                                    @ended="videoIsPlay = false" controls></video>

                            </view>
                            <span class="hashTag">
                                #{{item.hashTag}}
                            </span>
                            <view class="iconsLine">
                                <view class="eachBox">
                                    <image v-if="item.hasLiked" class="icon"
                                        src="https://visionmpapi.jiuerjindi.com/upload/mp/index/likes_yes.png"></image>
                                    <image v-else class="icon"
                                        src="https://visionmpapi.jiuerjindi.com/upload/mp/index/likes_no.png"></image>
                                    <text>{{item.liked}}</text>
                                </view>
                                <view class="eachBox">
                                    <image class="icon"
                                        src="https://visionmpapi.jiuerjindi.com/upload/mp/index/share.png">
                                    </image>
                                    <text>{{item.share}}</text>
                                </view>
                                <view class="eachBox">
                                    <image class="icon"
                                        src="https://visionmpapi.jiuerjindi.com/upload/mp/index/comment.png"></image>
                                    <text>{{item.comment}}</text>
                                </view>
                                <view class="eachBox">
                                    <image v-if="item.hasCollect" class="icon"
                                        src="https://visionmpapi.jiuerjindi.com/upload/mp/index/collection_yes.png">
                                    </image>
                                    <image v-else class="icon"
                                        src="https://visionmpapi.jiuerjindi.com/upload/mp/index/collection_no.png">
                                    </image>
                                    <text>{{item.collection}}</text>
                                </view>
                            </view>
                        </view>

                    </view>

                </view>
            </view>



        </view>


    </view>


    </view>
</template>

<script>
    const api = require("@/utils/api.js");
    const util = require("@/utils/util.js");
    const app = getApp();

    // import cunstomNavigationBar from '../../components/customNavigationBar/customNavigationBar.vue'
    export default {
        data() {
            return {
                searchName: '',
                videoIsPlay: false,
                picData: [],
                codeId: '',
                openId: '',
                avatarUrl: 'https://wx.widelink.net:8443/culturalRelicsCoding-uniapp/page_login/headPortrait.png',
                hasLogin: false,
                indicatorDots: false,
                selectedIndex: 0,
                cookInfoData: [
                    {
                        nickName: 'charlotte',
                        gender: 0,
                        age: 26,
                        addr: '广州',
                        text: '厨娘平台真的很给力！！尽情享受',
                        tag: '做饭教程',
                        url: '',
                        type: 'image',
                        hashTag: '做饭',
                        liked: 20,
                        hasLiked: true,
                        share: 33,
                        comment: 209,
                        collection: 99,
                        hasCollect: true,

                    },
                    {
                        nickName: '中华小当家',
                        gender: 1,
                        age: 26,
                        addr: '广州',
                        text: '厨娘平台真的很给力！！尽情享受',
                        tag: '做饭教程',
                        url: '',
                        type: 'image',
                        hashTag: '做饭',
                        liked: 20,
                        hasLiked: true,
                        share: 33,
                        comment: 209,
                        collection: 99,
                        hasCollect: false
                    }, {
                        nickName: 'mark',
                        gender: 0,
                        age: 26,
                        addr: '广州',
                        text: '厨娘平台真的很给力！！尽情享受',
                        tag: '做饭教程',
                        url: '',
                        type: 'video',
                        hashTag: '做饭',
                        liked: 20,
                        hasLiked: false,
                        share: 33,
                        comment: 209,
                        collection: 99,
                        hasCollect: true
                    }
                ],

                imgUrl: '',

                queryParams: {
                    "modulesId": '', //模块id
                    "mallProductName": '', //商品名称
                    "pageNum": 1, //页数
                    "pageSize": 200 //每页数量
                },
                propStyles: {
                    iconSrc: "black",
                    // zhanweiColor: '#FECF01',
                    txtColor: '#333333',
                    // bgColor: '#FECF01',
                    // bgSrc: "https://wx.widelink.net:8443/culturalRelicsCoding-uniapp/static/index/bg1.png",
                    // bgSrc1: "https://wx.widelink.net:8443/culturalRelicsCoding-uniapp/static/index/bg2.png"
                }

            };
        },

        methods: {
            goback() {
                uni.navigateBack()
            },
            changeIndex(index) {
                this.selectedIndex = index
            },
            closeInvitate() {
                this.$refs.popUpCoupon.close();
            },




            iconClick() {
                console.log('填写信息~~', this.searchScenicName);
                if (this.searchScenicName === '') {
                    this.searchScenicName = "南京海底世界"
                }
                uni.navigateTo({
                    url: `/page_ticketSearchResult/ticketSearchResult?key=${this.searchScenicName}`
                })
            },
            jumpTo(url, isTabPage, mustLogin) {
                console.log('首页手机号~~', app.globalData.phone);
                if (mustLogin && !app.globalData.phone) {
                    //去登录授权
                    uni.navigateTo({
                        url: `/page_login/login?from=myInfo`,
                    })
                    return
                }
                if (!url) {
                    util.toast('敬请期待~')
                    return
                }
                console.log('1111');
                if (isTabPage) {
                    console.log('2222');
                    uni.switchTab({
                        url: `${url}`,
                    })
                } else {
                    console.log('333');
                    uni.navigateTo({
                        url: `${url}`
                    })
                }

            },

            getTopicPic() {

                util.request(api.selectTopicPic,
                    { type: 1 }

                    , 'GET', 'application/json').then(res => {

                        if (res.code == 200) {
                            this.picData = res.data
                            console.log('this.picData.length~~', this.picData.length);

                            if (this.picData.length > 1) {
                                this.indicatorDots = true
                            }




                        } else {

                            util.toast('查询失败')
                        }

                    }).catch((err) => {
                        console.log('err', err)

                    });

            },
            getProductList() {

                util.request(api.productList,
                    this.queryParams

                    , 'GET', 'application/json').then(res => {

                        if (res.code == 200) {
                            this.productData = res.rows
                            // this.showData = res.data;




                        } else {

                            util.toast('查询失败')
                        }

                    }).catch((err) => {
                        console.log('err', err)

                    });

            },
            jumpUrl(e) {
                if (e == '21') {
                    uni.navigateTo({
                        url: `/page_artExhibition/artExhibition`,
                    });
                } else if (e == '11') {
                    // uni.navigateTo({
                    //         url: `/page_login/login`,
                    //       })
                    uni.switchTab({
                        url: '/pages/robot/robot',
                    })

                } else if (e == '11') {

                    uni.switchTab({
                        url: '/pages/robot/robot',
                    })

                } else if (e == '31') {
                    uni.navigateTo({
                        url: `/page_webView/webView?url=https://mp.weixin.qq.com/s&gongzhonghao1=true`,
                    });
                    // url: `/page_webView/webView?url=https://im.huizhihuyuai.com/chatPage&${key}=true`,
                } else if (e == '32') {
                    uni.navigateTo({
                        url: `/page_webView/webView?url=https://mp.weixin.qq.com/s&gongzhonghao2=true`,
                    });

                } else if (e == '41') {
                    uni.navigateTo({
                        url: `/page_webView/webView?url=https://mp.weixin.qq.com/s&gongzhonghao6=true`,
                    });

                } else if (e == '42') {
                    uni.navigateTo({
                        url: `/page_webView/webView?url=https://mp.weixin.qq.com/s&gongzhonghao7=true`,
                    });

                } else if (e == '22') {

                    uni.navigateTo({
                        // url: `/page_webView/webView?url=https://mp.weixin.qq.com/s&gongzhonghao3=true`,
                        url: '/page_digitalHuman/digitalHuman',
                    });

                }

            },




            animationfinish(e) {

                let getTimestamp = new Date().getTime();
                if (e.detail.current == 0) {
                    this.swiperSrc22 = 'https://wx.widelink.net:8443/culturalRelicsCoding-uniapp/static/index/Baner' + (2) + '.gif' + "?timestamp=" + getTimestamp
                    this.swiperSrc33 = 'https://wx.widelink.net:8443/culturalRelicsCoding-uniapp/static/index/Baner' + (3) + '.gif' + "?timestamp=" + getTimestamp
                } else if (e.detail.current == 1) {
                    this.swiperSrc11 = 'https://wx.widelink.net:8443/culturalRelicsCoding-uniapp/static/index/Baner' + (1) + '.gif' + "?timestamp=" + getTimestamp
                    this.swiperSrc33 = 'https://wx.widelink.net:8443/culturalRelicsCoding-uniapp/static/index/Baner' + (3) + '.gif' + "?timestamp=" + getTimestamp
                } else if (e.detail.current == 2) {
                    this.swiperSrc11 = 'https://wx.widelink.net:8443/culturalRelicsCoding-uniapp/static/index/Baner' + (1) + '.gif' + "?timestamp=" + getTimestamp
                    this.swiperSrc22 = 'https://wx.widelink.net:8443/culturalRelicsCoding-uniapp/static/index/Baner' + (2) + '.gif' + "?timestamp=" + getTimestamp
                }
            },
            nextStep: function () {
                if (this.hasLogin) {
                    //扫码
                    this.scanFun()
                } else {
                    uni.navigateTo({
                        url: `/page_login/login`,
                    })
                }

            },
            loginByWeixin: function () {
                var that = this;
                let code = null;
                console.log('登录信息~~~111');
                return new Promise(function (resolve, reject) {
                    return util.login().then((res) => {
                        code = res.code;
                    }).then(() => {
                        util.request(api.AuthLoginByWeixin, {
                            appid: 'wx3a64d38adf2dfc10',
                            code: code
                        }, 'GET', 'application/json').then(res => {
                            if (res.code === 200) {
                                //存储用户信息
                                that.openId = res.data.openid;
                                app.globalData.openId = res.data.openid;
                                that.queryUserinfo()

                                resolve(res);
                            } else {
                                reject(res);
                            }
                        }).catch((err) => {
                            reject(err);
                        });
                    }).catch((err) => {
                        reject(err);
                    })
                });
            },
            queryUserinfo() {

                util.request(api.GetUserInfo, {

                    openId: this.openId
                }, 'GET', 'application/json').then(res => {
                    console.log('查询用户信息~~~111', res.code);
                    if (res.code === 200) {

                        if (res.data) {

                            app.globalData.userInfo.avatarUrl = res.data.headPicture;
                            app.globalData.userInfo.nickName = res.data.nickName;
                            app.globalData.companyName = res.data.orgName;
                            app.globalData.code = res.data.code;
                            console.log('查询用户信息~~~222', res.data.phone);
                            app.globalData.phone = res.data.phone;
                            // app.globalData.token = res.data.token;
                            app.globalData.artistState = res.data.artistState;
                            app.globalData.artistId = res.data.artistId;
                            util.setUserInfo(res.data.phone, res.data.token)
                            console.log('首页设置昵称头像', app.globalData.userInfo.nickName, app.globalData.userInfo.avatarUrl, res.data.nickName)
                            this.hasLogin = true;
                            uni.$emit('login', {

                            });
                            if (this.codeId) {
                                console.log('this.codeId~~222', this.codeId)
                                this.queryHandle(this.codeId)
                            }

                        } else {

                            this.hasLogin = false;
                            if (this.codeId) {
                                uni.navigateTo({
                                    url: `/page_login/login`,
                                })
                            }

                        }

                        resolve(res);
                    } else {

                        app.globalData.userInfo.avatarUrl = this.avatarUrl;
                        app.globalData.userInfo.nickName = '设置昵称';
                        app.globalData.userInfo.userName = '点击去登录';
                        app.globalData.companyName = '';
                        app.globalData.code = '';
                        util.toast('网络异常，请重试')
                        reject(res);
                    }
                }).catch((err) => {

                });

            },
            queryHandle(code) {
                console.log('标识解析~', code)
                util.request(api.QuewryHandles, {
                    handle: code,
                }, 'GET', 'application/json').then(res => {

                    if (res.code == 200) {
                        uni.navigateTo({
                            url: `/page_certificate/certificate?code=${code}`,
                        })

                    } else {
                        util.toast(res.msg)

                    }

                }).catch((err) => {
                    console.log('err', err)

                });
            },
            scanFun() {
                const that = this
                uni.scanCode({
                    success: function (res) {
                        const qrUrl = decodeURIComponent(res.result);
                        console.log('条码类型：' + res.result);
                        console.log('qrUrl:' + qrUrl);
                        let code = qrUrl.split('code=')[1];
                        console.log(typeof code, code)
                        that.queryHandle(code)
                        // util.request(api.QuewryHandles, {
                        //   handle: code,
                        // }, 'GET', 'application/json').then(res => {

                        //   if (res.code == 200) {
                        //     uni.navigateTo({
                        //       url: `/page_certificate/certificate?code=${code}`,
                        //     })

                        //   } else {
                        //     util.toast(res.msg)
                        //     // uni.switchTab({
                        //     //   url: '/pages/index/index',
                        //     // })
                        //   }

                        // }).catch((err) => {
                        //   console.log('err', err)

                        // });

                    }
                });
            },
            // 判断是否有可领优惠券
            checkIndexReceiveCoupon() {
                let that = this;
                util.request(api.checkIndexReceiveCoupon, {
                }, 'GET', 'application/json').then(res => {
                    if (res.code == 200) {
                        console.log("优惠券:" + res.data);
                        that.couponInfo = res.data;
                        if (that.couponInfo.id) {
                            that.$refs.popUpCoupon.open('center')
                        }

                        // 默认领取优惠券
                        that.receiveCoupon();
                    } else {
                        //util.toast(res.msg)
                    }

                }).catch((err) => {
                    console.log('err', err)
                });
            },
            // 领取优惠券
            receiveCoupon() {
                let that = this;
                if (this.couponInfo.id) {
                    util.request(api.receiveCoupon, {
                        id: that.couponInfo.id
                    }, 'POST', 'application/json').then(res => {
                        if (res.code == 200) {
                            console.log("领取成功");
                        }

                    }).catch((err) => {
                        console.log('err', err)
                    });

                }
            },

            // 获取优惠券价格
            getCouponInfoPrice() {
                if (this.couponInfo.type == 0) {
                    return this.getPrice(this.couponInfo.preferentialVal);
                } else if (this.couponInfo.type == 1) {
                    return (this.couponInfo.ratioVal / 10).toFixed(1) + "折";
                }
            },
            getPrice(price) {
                if (this.isParsableNumber(price)) {
                    return (price / 100).toFixed(2);
                } else {
                    return "--";
                }
            },
            isParsableNumber(n) {
                return !isNaN(parseFloat(n)) && isFinite(parseFloat(n));
            }


        },



        mounted() {


        },
        created() {

        },
        onLoad: function (option) {

            this.imgUrl = process.env.VUE_APP_BASE_URL + '/stage-api/file/statics'










        },
        onUnload() {

        },
        onShow: function () {
            uni.hideTabBar()

        },

    };
</script>
<style lang="scss">
    page {
        height: 100vh;
        overflow: auto;
        background-color: #FFFFFF !important;
    }
</style>
<style lang="scss" scoped>
    page {
        background-color: #FFFFFF !important;
    }

    .container {
        ::v-deep .companyInfoContainer {
            position: absolute;
            top: 0rpx;
            left: 0rpx;

            .navigationBar {
                background: transparent;
            }
        }
    }


    .contentBox {

        .topLine {
            width: 750rpx;
            height: 654rpx;
            background-image: url('https://visionmpapi.jiuerjindi.com/upload/mp/cookPersonal/bg.png');

            background-size: contain;
            padding-top: 162rpx;

            /* background: #FECF01; */
            .personalInfo {
                display: flex;
                align-items: center;

                .headPortrait {
                    width: 126rpx;
                    height: 126rpx;
                    margin-left: 30rpx;
                    margin-right: 46rpx;

                }

                .right {
                    .name {
                        font-family: OPPOSans, OPPOSans;
                        font-weight: 700;
                        font-size: 32rpx;
                        color: #22292E;
                        line-height: 60rpx;
                    }

                    .status {
                        font-family: OPPOSans, OPPOSans;
                        font-weight: 400;
                        font-size: 24rpx;
                        color: #22292E;
                    }
                }
            }

            .introduction {
                display: flex;
                align-items: center;
                padding-left: 30rpx;
                margin-top: 80rpx;

                image {
                    width: 30rpx;
                    height: 30rpx;
                    margin-right: 6rpx;
                }
            }
        }




    }

    .cookHome {
        position: absolute;
        width: 100%;
        top: 446rpx;

        .title {
            display: flex;
            padding-left: 30rpx;
            margin-bottom: 30rpx;

            .tab {
                font-family: OPPOSans, OPPOSans;
                font-weight: 400;
                font-size: 28rpx;
                color: rgba(51, 51, 51, 0.6);
                margin-right: 58rpx;
            }

            .selected {
                /* border-bottom: 6rpx solid #FECF01; */
                font-family: OPPOSans, OPPOSans;
                font-weight: 500;
                font-size: 32rpx;
                color: #333333;
                line-height: 40rpx;
            }
        }

        .contentList {
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;

            .dataBox {
                box-shadow: 0px -5px 20px 0px rgba(0, 0, 0, 0.15);
                width: 355*2rpx;
                min-height: 353*2rpx;
                padding: 44rpx 28rpx;
                margin-bottom: 20rpx;
                border-radius: 30rpx;
            }

            .personInfo {
                display: flex;

                .left {
                    margin-right: 34rpx;

                    .headPicture {
                        width: 72*2rpx;
                        height: 73*2rpx;
                    }
                }

                .right {
                    display: flex;
                    flex-direction: column;
                    justify-content: center;

                    .line1 {
                        display: flex;

                        .nickName {
                            font-size: 32rpx;
                            font-weight: 500;
                            color: #333333;
                            margin-right: 16rpx;
                        }

                        .genderImg {
                            width: 20rpx;

                        }
                    }

                    .line2 {
                        margin-top: 14rpx;
                        color: rgba(51, 51, 51, 0.6);
                        font-size: 24rpx;
                    }
                }
            }

            .text {
                font-size: 28rpx;
                color: #333333;
                margin-top: 36rpx;
                margin-bottom: 12rpx;
            }

            .tag {
                color: #FFCC00;
                font-size: 28rpx;
            }

            .media {
                margin-top: 26rpx;

                video {
                    width: 630rpx;
                    height: 330rpx;
                    background: rgba(0, 0, 0, 0.4);
                    border-radius: 0rpx 0rpx 0rpx 0rpx;
                }

                .uploadImg {
                    width: 132*2rpx;
                }
            }

            .hashTag {

                height: 40rpx;
                border-radius: 8rpx 20rpx 8rpx 20rpx;
                color: #D93F11;
                font-weight: bold;
                font-size: 20rpx;
                background: rgba(217, 63, 17, 0.1);
                display: inline-block;
                line-height: 40rpx;
                padding: 0rpx 20rpx;
                margin-top: 22rpx;
                margin-bottom: 26rpx;
            }

            .iconsLine {
                width: 100%;
                display: flex;
                justify-content: space-between;

                .eachBox {
                    display: flex;
                    align-items: center;

                    .icon {
                        width: 36rpx;
                        height: 36rpx;
                        margin-right: 14rpx;
                    }
                }


            }


        }
    }





    .zhanwei {
        width: 750rpx;
        height: 172rpx;
        background: #F4F4F2;
    }

    /deep/ .arrow-area {
        display: none;
    }

    /deep/ .input-value-border {
        border: none
    }

    /deep/ .placeholder {
        font-size: 29rpx;
        color: #333;
    }

    /deep/ .input-value {
        padding-right: 34rpx;
        padding-left: 10rpx;
    }

    /deep/ .is-input-border {
        border-radius: 20rpx;
    }

    ::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
        color: transparent;
    }
</style>